//初始化商品页渲染数据
localStorage.setItem('switch1', 'flower')
//检测本地存储是否开启
var te = localStorage.getItem('arr')
if(te==null){
	var arr=[]
	localStorage.setItem('arr',JSON.stringify(arr))
}
//菜单选项的二级显示
//获取对象
var show1 = document.querySelector('.show1');
var show2 = document.querySelector('.show2');
var show3 = document.querySelector('.show3');
var selB2 = document.querySelector('.sel-b2');
var selB3 = document.querySelector('.sel-b3');
var selB4 = document.querySelector('.sel-b4'); 
// var quick = document.querySelector('.qulick'); 
// //快捷导航
// 		//鼠标滚轮滚动事件
// 		window.onmousewheel=function(){
// 			//获取滚动条高度
// 			var srcTop=document.documentElement.scrollTop
// 			//到800是快捷导航出现
// 			if(srcTop<=800){
// 			quick.style.display="none"
// 			}else{
// 			quick.style.display="block"
// 			}
// 		}
//绑定事件
selB2.onmouseover = function () {
  show1.style.display = "block";
};

selB2.onmouseout = function () {
  show1.style.display = "none";
};

selB3.onmouseover = function () {
  show2.style.display = "block";
};

selB3.onmouseout = function () {
  show2.style.display = "none";
};

selB4.onmouseover = function () {
  show3.style.display = "block";
};

selB4.onmouseout = function () {
  show3.style.display = "none";
};

show1.onmouseover = function () {
  show1.style.display = "block";
  selB2.style.background ="rgba(0,0,0,.6)";
   
};

show2.onmouseover = function () {
  show2.style.display = "block";
  selB3.style.background = "rgba(0,0,0,.6)";
};

show3.onmouseover = function () {
  show3.style.display = "block";
  selB4.style.background = "rgba(0,0,0,.6)";
};

show1.onmouseout = function () {
  show1.style.display = "none";
  selB2.style.background = "";
};

show2.onmouseout = function () {
  show2.style.display = "none";
  selB3.style.background = "";
};

show3.onmouseout = function () {
  show3.style.display = "none";
  selB4.style.background = "";
}; 
//配送地址选择
var choose1=document.querySelector('.cake-top-l p')
var cover1=document.querySelector('.top-l-cover')
choose1.onmouseover=function(){
	cover1.style.display="block"
}
choose1.onmouseout=function(){
	cover1.style.display="none"
}
cover1.onmouseover=function(){
	cover1.style.display="block"
}
cover1.onmouseout=function(){
	cover1.style.display="none"
}

//ajax请求
// 判断是否为对象
function isObject(obj){
    if (typeof obj === 'object'&&obj !==null&&obj.constructor === Object) {
        return true
    } else {
        return false
    }
}
function ajax(options){
    // 1. 创建数据交互对象XMLHttpRequest对象（ajax对象）
    var xhr = new XMLHttpRequest()//除了IE56都支持
    // var xhr = new ActiveXObject('Microsoft.XMLHTTP')//ie56支持

    // 判断data参数数据类型 string or object
    
    var data = ''//保存格式化之后的参数 options.data
    if (typeof options.data === 'string') {
        // 如果是字符串不做任何处理，直接赋值
        data = options.data
    }
    if (isObject(options.data)) {
        // 如果options.data是对象，则格式化为字符串 'user=xiapcuo&pass=123456'
        for (var key in options.data){
            data += (key+'='+options.data[key]+'&')
        }
        // data = 'user=xiapcuo&pass=123456&'
        // 去掉最后一个&
        // data = data.substr(0,data.length-1)
        data = data.substring(0,data.length-1)
    }

    // 判断请求方式
    if (options.type.toLowerCase() === 'get') {
        // 是否使用缓存
        if (options.cache) {
            // 2. 初始化请求
            xhr.open(options.type,options.url+'?'+data,true)
        } else {
            // 2. 初始化请求
            xhr.open(options.type,options.url+'?'+data+'&_='+Date.now(),true)
        }
        // 3. 发送请求
        xhr.send(null)//get请求
    } else if (options.type.toLowerCase() === 'post'){
        // 2. 初始化请求
        xhr.open(options.type,options.url,true)
        // 设置请求头，作用是 模拟表单的post方式提交数据
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        // 3. 发送请求
        // post请求在此传参
        xhr.send(data)
    } else {
        alert('目前仅支持get或post请求！')
        return
    }

    // 4. 监听 请求状态 响应状态
    // xhr.readyState 代表请求状态 0-4
    // 当 xhr.readyState 请求状态发生改变时，会触发一个事件 readyStateChange
    xhr.onreadystatechange = function (){
        // console.log( xhr.readyState )// 2 3 4
        if (xhr.readyState === 4){//请求完成
            // 这时还不能拿到数据
            // console.log( xhr.status )//http响应状态码
            if (xhr.status >= 200 && xhr.status < 300) {
                if (options.dataType === 'json') {
                    // 如果是 json 数据，解析成对象之后再传出
                    var json = JSON.parse(xhr.responseText)
                    options.success(json)
                } else if (options.dataType === 'xml'){
                    options.success(xhr.responseXML)
                } else {
                    options.success(xhr.responseText)
                }
            } else {
                options.error(xhr.status)
            }
        }
    }
}

//获得渲染母体对象
var mu1 = document.querySelector('.xuanran1')
var mu2 = document.querySelector('.xuanran2')
var mu3 = document.querySelector('.xuanran3')
var mu4 = document.querySelector('.xuanran4')
var mu5 = document.querySelector('.xuanran5')
var mu6 = document.querySelector('.xuanran6')
var mu7 = document.querySelector('.xuanran7')
var mu8 = document.querySelector('.xuanran8')
var mu9 = document.querySelector('.xuanran9')
window.onload=function(){
	ajax({
		   url: '../data/listPage.json',
		   type: 'get',
		   dataType: 'json',
		   success: function (json){
			 for(var i=72;i<80;i++){
				 var newDiv=document.createElement('div')
				   newDiv.className="down-r-block"
				   newDiv.innerHTML=`
				   <div class="r-block-up">
					<img src="../imgs/index-img/${json[i].url}" />
				   </div>
				   <div class="r-block-down">
					<p>${json[i].des1}</p>
					<p>￥ ${json[i].des3}</p>
					<p>${json[i].des2}</p>
				   </div>
				   `
				   mu1.appendChild(newDiv)
			 }
		   },
		   error: function (){
			   alert('网络异常，请稍后重试')
		   }
		})
	ajax({
		   url: '../data/listPage.json',
		   type: 'get',
		   dataType: 'json',
		   success: function (json){
			 for(var i=80;i<88;i++){
				 var newDiv=document.createElement('div')
				   newDiv.className="down-r-block"
				   newDiv.innerHTML=`
				   <div class="r-block-up">
					<img src="../imgs/index-img/${json[i].url}" />
				   </div>
				   <div class="r-block-down">
					<p>${json[i].des1}</p>
					<p>￥ ${json[i].des3}</p>
					<p>${json[i].des2}</p>
				   </div>
				   `
				   mu2.appendChild(newDiv)
			 }
		   },
		   error: function (){
			   alert('网络异常，请稍后重试')
		   }
		})
	ajax({
		   url: '../data/listPage.json',
		   type: 'get',
		   dataType: 'json',
		   success: function (json){
			 for(var i=88;i<96;i++){
				 var newDiv=document.createElement('div')
				   newDiv.className="down-r-block"
				   newDiv.innerHTML=`
				   <div class="r-block-up">
					<img src="../imgs/index-img/${json[i].url}" />
				   </div>
				   <div class="r-block-down">
					<p>${json[i].des1}</p>
					<p>￥ ${json[i].des3}</p>
					<p>${json[i].des2}</p>
				   </div>
				   `
				   mu3.appendChild(newDiv)
			 }
		   },
		   error: function (){
			   alert('网络异常，请稍后重试')
		   }
		})	
	ajax({
		   url: '../data/listPage.json',
		   type: 'get',
		   dataType: 'json',
		   success: function (json){
			 for(var i=96;i<112;i++){
				 var newDiv=document.createElement('dl')
				   newDiv.innerHTML=`
				   	<dt><img src="../imgs/index-img/${json[i].url}"></dt>
				   	<dd>${json[i].des1}</dd>
				   `
				   mu4.appendChild(newDiv)
			 }
		   },
		   error: function (){
			   alert('网络异常，请稍后重试')
		   }
		})	
	ajax({
		   url: '../data/listPage.json',
		   type: 'get',
		   dataType: 'json',
		   success: function (json){
			 for(var i=112;i<116;i++){
				 var newDiv=document.createElement('dl')
				  newDiv.innerHTML=`
				  	<dt><img src="../imgs/index-img/${json[i].url}"></dt>
				  	<dd>${json[i].des1}</dd>
				  `
				  mu5.appendChild(newDiv)
			 }
		   },
		   error: function (){
			   alert('网络异常，请稍后重试')
		   }
		})	
	ajax({
		   url: '../data/listPage.json',
		   type: 'get',
		   dataType: 'json',
		   success: function (json){
			 for(var i=116;i<120;i++){
				 var newDiv=document.createElement('dl')
				  newDiv.innerHTML=`
				  	<dt><img src="../imgs/index-img/${json[i].url}"></dt>
				  	<dd>${json[i].des1}</dd>
				  `
				  mu6.appendChild(newDiv)
			 }
		   },
		   error: function (){
			   alert('网络异常，请稍后重试')
		   }
		})	
	ajax({
		   url: '../data/listPage.json',
		   type: 'get',
		   dataType: 'json',
		   success: function (json){
			 for(var i=96;i<106;i++){
				 var newDiv=document.createElement('dl')
				   newDiv.innerHTML=`
				   	<dt><img src="../imgs/index-img/${json[i].url}"></dt>
				   	<dd>${json[i].des1}</dd>
				   `
				   mu7.appendChild(newDiv)
			 }
		   },
		   error: function (){
			   alert('网络异常，请稍后重试')
		   }
		})	
	ajax({
		   url: '../data/listPage.json',
		   type: 'get',
		   dataType: 'json',
		   success: function (json){
			 for(var i=120;i<125;i++){
				 var newDiv=document.createElement('dl')
				   newDiv.innerHTML=`
				   	<dt><img src="../imgs/index-img/${json[i].url}"></dt>
				   	<dd>${json[i].des1}</dd>
				   `
				   mu8.appendChild(newDiv)
			 }
		   },
		   error: function (){
			   alert('网络异常，请稍后重试')
		   }
		})	
	ajax({
		   url: '../data/listPage.json',
		   type: 'get',
		   dataType: 'json',
		   success: function (json){
			 for(var i=125;i<136;i++){
				 var newDiv=document.createElement('dl')
				   newDiv.innerHTML=`
				   	<dt><img src="../imgs/index-img/${json[i].url}"></dt>
				   	<dd>${json[i].des1}</dd>
				   `
				   mu9.appendChild(newDiv)
			 }
		   },
		   error: function (){
			   alert('网络异常，请稍后重试')
		   }
		})	
}

//全局点击事件
var uName = document.querySelector('.h-right li:nth-child(1)')//获取导航栏用户名对象
var shoppcar = document.querySelector('.h-right li:nth-child(9)')//购物车商品数量
var name = localStorage.getItem('user1')//获取用户名
var rem1 = localStorage.getItem('rem')//获取用户记忆
var num1 = localStorage.getItem('carnum')
if(rem1=='1'){
		uName.innerHTML=`<a href="login.html">您好,${name}! </a><a>&nbsp;退出</a>`
	}
shoppcar.children[3].innerHTML=localStorage.getItem('carnum')

//通用，页面跳转
document.onclick=function(e){
	var e = e||window.event
	var target = e.target || e.srcElement
	//跳转商品列表页
	if(target.innerHTML=="永生花"){
		//用于渲染不同数据
		localStorage.setItem('switch1','forever')
		window.location.href="listPage.html"
	}
	if(target.innerHTML=="鲜花"){
		//用于渲染不同数据
		localStorage.setItem('switch1','flower')
		window.location.href="listPage.html"
	}
	//跳转登录注册页
	if(target.innerHTML=="注册||您好，请登录"){
		window.location.href="login.html"
	}
	//跳转商品详情页
	
	if(target.parentNode.parentNode.className=="down-r-block"){
		// console.log(target.parentNode.parentNode.children[1].children[1].innerHTML)
		var str=target.parentNode.parentNode.children[0].children[0].src
		var miao1=target.parentNode.parentNode.children[1].children[0].innerHTML
		var miao2=target.parentNode.parentNode.children[1].children[1].innerHTML
		miao2=miao2.split('￥')
		miao2=miao2[1]
		str=str.split('flower/')
		var str1=str[1]
		var str2=`../${str1}`
		
		// console.log(str1)
		// console.log(str2)
		// console.log(miao1)
		// console.log(miao2)
		localStorage.setItem('str2',str2)//设置当前图片地址(原图)
		localStorage.setItem('str1',str1)//设置当前图片地址(放大图)
		localStorage.setItem('miao1',miao1)//设置当前商品标题(原图)
		localStorage.setItem('miao2',miao2)//设置当前商品价格(放大图)
		window.location.href="detailPages.html"
	}
	//跳转首页
	if(target.innerHTML=="首页"){
		window.location.href="index.html"
	}
	//跳转购物车页
	if(target.parentNode.className=="guowu"){
		var check1=localStorage.getItem('rem')
		if(check1==null){
			alert('请先登录！查看购物车！')
			 window.location.href="login.html"
		}else{
			 window.location.href="shopping.html"
			}
	}
	
	//退出用户登录
	if(target.innerHTML=="&nbsp;退出"){
		if(confirm("退出后购物车将被清空，请问是否退出？")){
			localStorage.removeItem('rem')
			localStorage.removeItem('str1')
			localStorage.removeItem('str2')
			localStorage.removeItem('miao1')
			localStorage.removeItem('miao2')
			localStorage.setItem('carnum','0')
			var arr=[]
			localStorage.setItem('arr',JSON.stringify(arr))
			window.location.reload()
		}
	}
	
}